<template>
  <div class="audit-container">
    <div class="audit-top">
      <span>等待审核： {{ totalAudit.waitingAudit || 0 }} 元</span>
      <span>通过审核： {{ totalAudit.successAudit || 0 }} 元</span>
      <span>累计转账： {{ totalAudit.countAudit || 0 }} 元</span>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="2"
      @search="search"
      @reset="reset"
      @export="handleExport"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-column="tableColumn"
      :table-data="tableData"
      :btn-option="btnOption"
      btn-prop="isaudit"
      @page-click="pageClick"
    >
      <template #first="{ data }">
        <div class="flex-center">
          <span>{{ data.username }}</span>
          <span>{{ data.cellphone }}</span>
        </div>
      </template>
      <template #second="{ data }">
        <div>
          <span>{{ data.amount }}</span>
          <span style="margin: 0 10px">/</span>
          <span>{{ data.allbalance }}</span>
        </div>
      </template>
    </HHtable>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import { splicingUrl } from '@/utils/validate'
  import { auditAmount, auditList, confirmAudit } from '@/api/audit'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 0,
        totalAudit: {
          countAudit: 0,
          successAudit: 0,
          waitingAudit: 0,
        },
        searchOptions: [
          {
            type: 'select',
            prop: 'isAudit',
            label: '状态：',
            span: 6,
            placeholder: '请选择',
            arr: [
              {
                value: 0,
                label: '待审核',
              },
              {
                value: 1,
                label: '已通过',
              },
              {
                value: 2,
                label: '已转账',
              },
            ],
          },
          {
            type: 'text',
            prop: 'userName',
            span: 6,
            label: '申请人名称：',
            placeholder: '选择或输入搜索',
          },
          {
            type: 'text',
            prop: 'cellPhone',
            label: '手机号：',
            span: 6,
            placeholder: '选择或输入搜索',
          },
          {
            type: 'daterange',
            prop: 'daterange',
            label: '申请时间：',
            span: 8,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            type: 'text',
            prop: 'auditor',
            label: '审核人名称：',
            span: 6,
            placeholder: '选择或输入搜索',
          },
          {
            type: 'text',
            prop: 'transferperson',
            label: '转账人名称：',
            span: 6,
            placeholder: '选择或输入搜索',
          },
        ],
        tableColumn: [
          {
            label: '申请人名称/手机号',
            slotContent: 'first',
          },
          {
            label: '申请额度/累计获得积分',
            width: '180',
            slotContent: 'second',
          },
          {
            prop: 'createdate',
            label: '申请时间',
          },
          {
            prop: 'isauditVal',
            label: '申请状态',
          },
          {
            prop: 'bankcardno',
            width: '180',
            label: '申请提现银行卡号',
          },
          {
            prop: 'bankusername',
            label: '持卡人',
          },
          {
            prop: 'auditor',
            label: '审核人',
          },
          {
            prop: 'auditdate',
            label: '审核时间',
          },
          {
            prop: 'againauditor',
            label: '复审人',
          },
          {
            prop: 'againAuditorTime',
            label: '复审时间',
          },
          {
            prop: 'transferperson',
            label: '转账人',
          },
          {
            prop: 'transferdate',
            label: '转账时间',
          },
        ],
        tableData: [],
        btnOption: [
          {
            type: 'primary',
            size: 'mini',
            text: '通过审核',
            except: [0],
            show: true,
            func: this.accessAudit,
          },
          {
            type: 'primary',
            size: 'mini',
            text: '确认转账',
            except: [1],
            show: true,
            func: this.confirmTransferAccount,
          },
          {
            type: 'primary',
            size: 'mini',
            text: '通过复审',
            except: [3],
            show: true,
            func: this.accessAgainAudit,
          },
        ],
        params: {
          pageSize: 10,
          pageNumber: 1,
          queryCriteria: {
            isAudit: '',
            userName: '',
            cellPhone: '',
            auditor: '',
            transferperson: '',
            startTime: '',
            endTime: '',
          },
        },
        topArray: ['S22', 'S52', '1368', 'S68'],
        secondArray: [
          'T14',
          'T59',
          'S30',
          'S71',
          '360',
          '446',
          '1330',
          '245',
          '635',
          '534',
        ],
        user: JSON.parse(localStorage.getItem('user')) || '',
      }
    },
    mounted() {
      const user = JSON.parse(localStorage.getItem('user'))
      // 判断角色，分配按钮级别权限。基于构架无法使用自定义指令。
      // 角色1 通过复审   角色2 通过审核    T60 确认转账
      if (this.topArray.includes(user.username)) {
        this.btnOption.forEach((item) => {
          if (item.text !== '通过复审') {
            item.show = false
          }
        })
      } else if (this.secondArray.includes(user.username)) {
        this.btnOption.forEach((item) => {
          if (item.text !== '通过审核') {
            item.show = false
          }
        })
      } else if (user.username === 'T60') {
        this.btnOption.forEach((item) => {
          if (item.text !== '确认转账') {
            item.show = false
          }
        })
      }
      this.getAuditAmount()
      this.getList()
    },
    methods: {
      getAuditAmount() {
        auditAmount().then((res) => {
          if (res.code == 200) {
            this.totalAudit = res.data
          }
        })
      },
      getList() {
        this.$refs.table.loading = true
        auditList(this.params).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.total = res.data.total
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          }
        })
      },
      search(res) {
        if (res.daterange) {
          res.startTime = res.daterange[0]
          res.endTime = res.daterange[1]
          delete res.daterange
        }
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params.queryCriteria[arr[i]] = res[arr[i]]
        }
        this.getList()
      },
      reset() {
        this.params = {
          pageSize: 10,
          pageNumber: 1,
          queryCriteria: {
            isAudit: '',
            userName: '',
            cellPhone: '',
            auditor: '',
            transferperson: '',
            startTime: '',
            endTime: '',
          },
        }
        this.$refs.search.removeFilterArray()
        this.getList()
      },
      handleExport(res) {
        if (res.daterange) {
          res.startTime = res.daterange[0]
          res.endTime = res.daterange[1]
          delete res.daterange
        }
        let url = splicingUrl(res)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = this.baseURL + '/withdrawApply/exportWithdrawApply.do'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      accessAudit(res) {
        let params = {
          type: 1,
          ids: res.id,
          auditor: this.user.name,
        }
        confirmAudit(params).then((res) => {
          if (res.code === 200) {
            this.$baseMessage('操作成功', 'success')
            this.getList()
            this.getAuditAmount()
          }
        })
      },
      accessAgainAudit(res) {
        let params = {
          type: 3,
          ids: res.id,
          auditor: this.user.name,
        }
        confirmAudit(params).then((res) => {
          if (res.code === 200) {
            this.$baseMessage('操作成功', 'success')
            this.getList()
            this.getAuditAmount()
          }
        })
      },
      confirmTransferAccount(res) {
        let params = {
          type: 2,
          ids: res.id,
          auditor: this.user.name,
        }
        confirmAudit(params).then((res) => {
          if (res.code === 200) {
            this.$baseMessage('操作成功', 'success')
            this.getList()
            this.getAuditAmount()
          }
        })
      },
      pageClick(pager) {
        this.params.pageNumber = pager
        this.getList()
      },
    },
  }
</script>

<style scoped lang="scss">
  .flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .audit-top {
    margin: 20px 0;
    font-size: 14px;
    color: red;
    span {
      margin-right: 50px;
    }
  }
</style>
